Cloudflare Workers
$ npm create cloudflare@latest -- my-app
https://www.youtube.com/watch?v=H7Qe96fqg1M
$ npx create-cloudflare my-app --framework hono \ --deploy false
$ cd my-app && npm run dev
.dev.vars
$ echo "ENV = \"local\"" >> .dev.vars
deploy後使用的環境變數
wrangler.toml
code:wrangler.toml
name = "my-app"
compatibility_date = "2023-01-01"
ENV = "development"
index.ts
code:index.ts
import { Hono } from "hono";
const app = new Hono<{
Bindings: {
ENV: string;
};
}>();
app.get("/", (c) => c.text(c.env.ENV));
export default app;
使用wrangler指令加入middleware
需於wrangler.toml加上設定
Layout
code:src/renderer.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
export const renderer = jsxRenderer(({ children }) => {
return (
<html>
<head>
</head>
<body>
<header>
<h1><a href="/">Title</a></h1>
</header>
<div>{children}</div>
</body>
</html>
)
})
code:src/index.tsx
app.get('/', (c) => {
return c.render(
<div>
<h2>Subtitle</h2>
<form action="/create" method="post">
<input type="text" name="url" autocomplete="off" style={{ width: '80%' }} />
<button type="submit">Submit</button>
</form>
</div>
)
})
LogPush
C3
Create Cloudflare CLI
Bindings
Worker之間不可透過如網址互相存取
RPC
HTTP
Bindings
可以串聯Cloudflare的各個服務
例如在wrangler.toml中加上[[kv_namespaces]]]就能直接存取KV
反之就必須接入SDK，以及撰寫相關處理
Service Bindings
串聯多個Worker
JS RPC
能夠自訂Bindings、簡化Service Bindings
code:wrangler.toml
services
binding = "程式內的存取名稱"
service = "串聯的外部Worker名稱"
code:js
export default {
async fetch(request, env) {
return new Response(${result})
}
} satisfies ExportedHandler<Env>